<template>
	<view class="index">
		<uni-nav-bar dark :fixed="true" :border="false" background-color="#FFFFFF" status-bar 
			title="首页" color="#000" />
		<u-sticky offset-top="64">
			<u-tabs :list="list1" @click="click"></u-tabs>
		</u-sticky>
		<scroll-view class="index-body" :scroll-y="true" :refresher-enabled="true" 
			:refresher-triggered="triggered" @refresherrefresh="onRefresh" 
			@refresherrestore="onRestore" @scrolltolower="onScroll">
			<view :class="{'video-row': item.isVideo,'text-row':!item.isVideo}" 
				v-for="(item,index) in materialList" :key="index" 
				@click="toPage('/pages/index/material?id='+item.id)">
				<view style="font-weight: 800;">
					<text>{{item.title}}</text>
				</view>
				<view v-if="item.isVideo" style="width: 100%;height: 75%;margin: 10rpx 0 5rpx 0;">
					<video class="video-view" 
						:src="READ_VIDEO_URL+item.videoUrl">
					</video>
				</view>
				<view v-else style="display: flex;height: 70%;">
					<view class="text-content">
						{{item.content}}
					</view>
					<view v-if="item.isImage && !item.isVideo" style="width: 45%;height: 100%;">
						<image class="text-img" mode="aspectFill" 
							:src="READ_IMG_URL+item.imageUrl[0]">
						</image>
					</view>
				</view>
				<view style="height: 40rpx;display: flex;font-size: 25rpx;color: #909399;">
					<view style="display: flex;">
						<!-- <u-icon name="account" size="18"></u-icon> -->
						<text>{{item.nikeName}}</text>
					</view>
					<view style="margin-left: 20rpx;display: flex;">
						<!-- <u-icon name="clock" size="18"></u-icon> -->
						<text>{{item.releaseTime}}</text>
					</view>
					<view style="margin-left: 20rpx;display: flex;">
						<u-icon name="eye" size="18"></u-icon>
						<text style="margin-left: 10rpx;">{{item.viewCount}}</text>
					</view>
					<view v-if="item.status !== null" style="margin-left: 20rpx;">
						<text v-if="item.status===0" style="color: #ff9900;">未学习</text>
						<text v-if="item.status===1" style="color: #5ac725;">已学习</text>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" :line="true" />
		</scroll-view>
	</view>
</template>

<script>
	import api from "../../request/api.js";
	import companyApi from "../../request/companyCultureApi.js";
	import config from "../../request/config.js";
	export default{
		data(){
			return{
				READ_IMG_URL: config.READ_IMG_URL,
				READ_VIDEO_URL: config.READ_VIDEO_URL,
				triggered: false,
				freshing: false,
				userInfo: {},
				list1: [{
                    name: '全部内容',
                }, {
                    name: '学习资料',
                }, {
                    name: '培训视频'
                }, {
                    name: '会议视频'
                }, {
                    name: '公司介绍'
                }, {
                    name: '管理制度'
                }],
				materialList: [],
				formDate: {
					currentPage: 1,
					pageSize: 10,
					type: null,
				},
				notDate: false,
				status: 'loadmore',
				isReset: false,
			}
		},
		onReady() {
			this.userInfo = uni.getStorageSync("loginUser");
			setTimeout(() => {
			    this.triggered = true;
			}, 500)
		},
		onShow() {
			this.getMsgList();
		},
		methods: {
			// 页面跳转
			toPage(url){
				uni.navigateTo({
					url:url
				})
			},
			// 获取资料
			getMaterialList(){
				return new Promise(resolve =>{
					companyApi.getMaterialList(this.formDate).then(res =>{
						if (res.code === 200){
							if (this.isReset){
								this.materialList = [];
								this.isReset = false;
							}
							if (res.data.materialList.length === 0){
								this.notDate = true;
								this.status="nomore";
								resolve("nomore");
							}else {
								res.data.materialList.forEach(item =>{
									if (item.videoUrl!== null && item.videoUrl!==''){
										item.isVideo = true
									}else {
										item.isVideo = false
									}
									if (item.imageUrl!== null && item.imageUrl.length > 0){
										item.isImage = true
									}else {
										item.isImage = false
									}
									item.releaseTime=this.formatTimeAgo(item.createTime);
									this.materialList.push(item);
								})
								if (res.data.materialList.length <= this.formDate.pageSize){
									this.status= "nomore";
								}else {
									this.status= "loadmore";
								}
								resolve("loadmore");
							}
						}
					})
				})
			},
			// 切换类型
			click(item){
				this.formDate.currentPage = 1;
				this.formDate.pageSize = 10;
				this.notDate = false;
				this.status= "loadmore";
				this.isReset = true;
				if (item.index === 0){
					this.formDate.type = null;
					this.triggered = true;
				}else if (item.index !== 0){
					this.formDate.type = item.index-1;
					this.triggered = true;
				}
			},
			// 下拉刷新
		    onRefresh() {
				console.log("====>自定义下拉刷新被触发<====")
				this.formDate.currentPage = 1;
				this.formDate.pageSize = 10;
				this.notDate = false;
				this.isReset = true;
				this.getMaterialList().then(res =>{
					this.triggered = false;
				});
		    },
			// 下拉复位
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			// 滑动到底部
			onScroll() {
				if (this.notDate){
					this.status="nomore"
				}else {
					this.formDate.currentPage++;
					this.status = "loading";
					this.getMaterialList();
				}
			},
			// 计算时间差
			formatTimeAgo(time){
				const now = new Date();
				const target = new Date(time);
				// 计算时间差（单位：毫秒）
				const diff = now.getTime() - target.getTime();
				// 小于1分钟，返回xx秒前
				if (diff < 60000) {
					const seconds = Math.floor(diff / 1000);
					return `${seconds}秒前`;
				}
				// 小于1小时，返回xx分钟前
				if (diff < 3600000) {
					const minutes = Math.floor(diff / 60000);
					return `${minutes}分钟前`;
				}
				// 小于1天，返回xx小时前
				if (diff < 86400000) {
					const hours = Math.floor(diff / 3600000);
					return `${hours}小时前`;
				}
				// 大于等于1天，返回年月日
				const year = target.getFullYear();
				const month = target.getMonth() + 1;
				const day = target.getDate();
				
				return `${year}-${month}-${day}`;
			},
			// 查消息条数
			getMsgList(){
				const data = {
					currentPage: 1,
					pageSize: 10,
					msgStatus: 0,
				}
				api.getMsgNotificationList(data).then(res =>{
					if (res.code === 200){
						if (res.data.total > 0){
							uni.setTabBarBadge({
								index: 2,
								text: res.data.total.toString()
							})
						}else {
							uni.removeTabBarBadge({
								index: 2
							});
						}
					}
				})
			}
		},
	}
</script>

<style>
	.index{
		width: 100%;
		height: 100vh;
		/* background-color: #9e9e9e26; */
	}
	
	.index-body {
		width: 94%;
		height: 82vh;
		margin: auto;
		margin-top: 10rpx;
		padding-bottom: 10rpx;
		/* background-color: aqua; */
	}
	
	.video-row{
		width: 100%;
		height: 400rpx;
		margin-bottom: 20rpx;
		/* line-height: 57rpx; */
	}
	.text-row{
		width: 100%;
		height: 275rpx;
		margin-bottom: 20rpx;
	}
	.text-content{
		flex: 1;
		font-size: 29rpx;
		text-indent: 2em;
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
	}
	.text-img{
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	
	.video-view{
		width: 100%;
		height: 100%;
	}
</style>